<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        引入外部:css和js的方式：
        th:href="@{/}" 中@{/}获取的是项目名springboot
    -->
    <link rel="stylesheet" th:href="@{/css/thymeleaf.css}">
    <!--<link rel="stylesheet" href="../static/css/thymeleaf.css" th:href="@{/css/thymeleaf.css}">-->
    <script th:src="@{/js/thymeleaf.js}"></script>

    <script>
        window.onload = function(){
            //调用外部thymeleaf.js中的test();
            test();
            //通过Js获取项目名 /springboot/ 的写法[[ @{/} ]]
            let contextPath = "[[ @{/} ]]";
            alert("contextPath：" + contextPath);
        }
    </script>
</head>
<body>
    <h1>Thymeleaf模板学习</h1>
    <hr/>

    <div class="font">1.th:text="${xxx}",会以文本的形式直接渲染</div>
    <div th:text="${string}"></div>
    <div th:text="${int}"></div>
    <div th:text="${boolean}"></div>
    <br>
    <hr/>

    <div class="font">2.th:utext="${xxx}",会先将数据解析成Html,在渲染到页面</div>
    <div th:utext="${baidu}"></div>
    <br>
    <hr/>

    <div class="font">3.th:value="${xxx}",获取controller中的值,并赋值在input的value属性中</div>
    <div>
        <input type="text" name="username" th:value="${string}"/>
        <input type="text" name="username" th:value="${int}"/>
        <input type="text" name="username" th:value="${boolean}"/>
    </div>
    <br>
    <hr/>

    <div class="font">4.获取对象emp中的属性值,使用${#dates.format(xxx,'yyyy-MM-dd HH:mm:ss')}格式化日期</div>
    <div>
        id:<input type="text" name="id" th:value="${employee.id}"/><br/>
        name:<input type="text" name="name" th:value="${employee.name}"/><br/>
        birthday:<input type="text" name="birthday" th:value="${#dates.format(employee.birthday,'yyyy-MM-dd HH:mm:ss')}"/><br/>
        salary:<input type="text" name="salary" th:value="${employee.salary}"/><br/>
        gender:<input type="text" name="gender" th:value="${employee.gender}"/>
    </div>
    <br>
    <hr/>

    <div class="font">
        5.遍历List集合,使用th:each="emp,empStat:${empList}"<br/>
        使用${empStat.index}下标从0开始<br/>
        使用${empStat.count}下标从1开始<br/>
        使用${empStat.odd}判断遍历的当前对象是否是奇数,返回true/false<br/>
        使用${empStat.even}判断遍历的当前对象是否是偶数,返回true/false<br/>
        使用${empStat.size}获取集合中的元素个数<br/>
        隔行变色使用th:style="'background-color:' + ${empStat.odd?'white':'hotpink' + ';'}"
    </div>
    <table border="1" cellspacing="0">
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>姓名</th>
            <th>生日</th>
            <th>工资</th>
            <th>性别</th>
        </tr>
        <tr th:each="emp,empStat:${empList}" th:style="'background-color:' + ${empStat.odd?'white':'hotpink' + ';'}">
            <td th:text="${empStat.index + 1}"></td>
            <td th:text="${emp.id}"></td>
            <td th:text="${emp.name}"></td>
            <td th:text="${#dates.format(emp.birthday,'yyyy-MM-dd')}"></td>
            <td th:text="${emp.salary}"></td>
            <td th:text="${emp.gender}"></td>
        </tr>
    </table>
    <br>
    <hr/>

    <div class="font">6.获取session中的值,使用${session.xxx}格式化日期</div>
    <div th:text="${session.sessionData}"></div>
    <br>
    <hr/>

    <div class="font">
        7.外部css和js的引入方式<br/>
        th:href="@{/}" 中@{/}获取的是项目名/springboot/<br/>
        th:href="@{/css/thymeleaf.css}"<br/>
        th:src="@{/js/thymeleaf.js}"<br/>
    </div>
    <br>
    <hr/>

    <div class="font">
        8.使用th:if="${}"进行相关的If判断
    </div>
    <br>
    <hr/>
</body>
</html>